<template>
	<view class="box">
		<view class="header"></view>
		<view class="content">
			<view class="uni-common-mt">
				<view style="font-size: 26px; color: #378EE4;">H!&nbsp;欢迎登录</view>
				<view class="uni-form-item">
					<view class="title"><text class="uni-form-item__title">用户名</text></view>
					<view class="uni-input-wrapper">
						<input v-model="form.username" class="uni-input-login" placeholder="请输入用户名" />
					</view>
					<view class="clear"></view>
				</view>
				<view class="uni-form-item">
					<view class="title"><text class="uni-form-item__title">密码</text></view>
					<view class="uni-input-wrapper">
						<input v-model="form.password" class="uni-input-login" type="password" placeholder="请输入密码" />
					</view>
					<view class="clear"></view>
				</view>
			</view>
			<view class="uni-btn">
				<button :loading="loginLoading" type="primary" @click="doLogin()" style="background-color: #4DA7FF;">登录</button>
			</view>
			<!-- 报错 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message type="error" message="用户名或密码错误" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		login
	} from '@/api/equip.js';
	export default {
		data() {
			return {
				form: {
					username: '',
					password: ''
				},
				loginLoading: false
			}
		},
		onLoad() {

		},
		methods: {
			// 登录
			doLogin() {				this.$Toast.loading('登录中');				login('', 'post', {						password: this.form.password,						username: this.form.username					}).then(res => {						if(res.code == 200){
							uni.setStorageSync('token', res.data.token);
							// uni.setStorageSync('organizationId', res.data.organization.id);
							uni.switchTab({
								url: '/pages/equipment/equipmentList'
							});
						}					})					.catch(err => {					})			},
		}
	}
</script>

<style>
	.header {
		background-color: #1976D3;
		height: 100px;
	}
	
	.content {
		width: 80%;
		margin: 0px auto;
		background-color: #FFFFFF;
		border-radius: 10px;
		position: relative;
		bottom: 70px;
		padding: 20px 20px 30px 20px;
	}
	
    .title {
        padding: 5px 13px;
		float: left;
		/* width: 20%; */
		width: 115rpx;
		text-align: right;
    }
	
	.uni-input-wrapper {
		/* width: 68%; */
		width: 425rpx;
		float: right;
	}
	
	.uni-input-login {
		margin-top: 10rpx;
	}
	
	.uni-form-item {
		padding: 15px 0px;
		border-bottom: 1px solid #E6E6E6;
	}
	
	.uni-btn {
		margin-top: 20px;
	}
	
	.uni-btn button {
		width: 100%;
		text-align: center;
		font-size: 16px;
	}
</style>
